<template>
    <van-popup v-model:show="showPop" position="right" :style="{ width: '80%', height: '100%' }">
        <img src="/img/close.png" alt="" class="absolute top-12 right-12 w-14" @click="showPop = false">
        <div class="pt-30 px-20">
            <div class="flex items-center justify-between  py-10">
                <div class="flex items-center">
                    <img :src="curLangObj.url" alt="" class="w-30 mr-10"></img>
                    <div class="color-#361a12">{{curLangObj.name}}</div>
                </div>
                <van-icon :name="openLang ? 'arrow-down' : 'arrow'" color="#836031" @click="openLang = !openLang" />
                <!--语言列表 -->
            </div>
            <div v-if="openLang" class="bg-#ffffff  rounded-8 px-20  my-5">
                <div v-for="v in langArr" :key="v.value" class="lang flex items-center justify-between h-60 border-b-1 border-#f3f3f3"
                    @click="changeLanguage(v)">
                    <div class="flex items-center ">
                        <div class="w-39 h-39  rounded-full flex justify-center items-center">
                            <img :src="v.url" alt="" class="w-24">
                        </div>
                        <div>{{ v.name }}</div>
                    </div>
                    <div>
                        <img v-if="v.value == curLangObj.value && v.checked" :src="v.selectImg" alt=""
                            class="w-12">
                    </div>
                </div>
            </div>
            <van-divider :style="{ borderColor: '#9e8769' }" v-if="!openLang"/>
            <div class="flex items-center justify-between  py-10">
                <div class="flex items-center">
                    <img src="/img/sq.png" alt="" class="w-30 mr-10"></img>
                    <div class="color-#361a12">社群</div>
                </div>
                <van-icon name="arrow" color="#836031"  @click="openSocial = !openSocial"/>
            </div>
            <div v-if="openSocial" class="bg-#ffffff  rounded-8 px-20  my-5">
                <div v-for="v in socialArr" :key="v.value" class="lang flex items-center justify-between h-60 border-b-1 border-#f3f3f3"
                    @click="changeLanguage(v)">
                    <div class="flex items-center ">
                        <div class="w-39 h-39  rounded-full flex justify-center items-center">
                            <img :src="v.url" alt="" class="w-24">
                        </div>
                        <div>{{ v.name }}</div>
                    </div>
                </div>
            </div>
            <van-divider :style="{ borderColor: '#9e8769' }" v-if="!openSocial"/>
            <div class="flex items-center justify-between  py-10">
                <div class="flex items-center">
                    <img src="/img/sound2.png" alt="" class="w-30 mr-10"></img>
                    <div class="color-#361a12">声音</div>
                </div>
                <!-- <van-icon name="arrow" color="#836031" /> -->
                <van-switch v-model="checked" active-color="#ff4545" inactive-color="#e2d882" />
            </div>
            <van-divider :style="{ borderColor: '#9e8769' }" />
        </div>
    </van-popup>
</template>
<script setup lang="ts">
import { useI18n } from 'vue-i18n';
import { Locale } from 'vant'
const { t, setLocale } = useI18n();
const showPop = defineModel()
const checked = ref(false)
const userStore = useUserStore()
const langArr = ref([
    { name: '中文', value: 'zh-CN', url: '/img/en.png', checked: false ,selectImg: '/img/select_lang.png'},
    { name: 'English', value: 'en-US', url: '/img/en.png', checked: false ,selectImg: '/img/select_lang.png'},
    { name: 'Indonesia', value: 'indon', url: '/img/indon.png', checked: false ,selectImg: '/img/select_lang.png'},
    { name: 'Myanmar', value: 'mm', url: '/img/mm.png', checked: false,selectImg: '/img/select_lang.png' },
    { name: 'Malaysia', value: 'mys', url: '/img/mys.png', checked: false ,selectImg: '/img/select_lang.png'},
    { name: 'Thailand', value: 'th', url: '/img/th.png', checked: false ,selectImg: '/img/select_lang.png'},
    // { name: 'Vietnam', value: 'vt', url: '/img/vt.png', checked: false },
])
const socialArr = ref([
    { name: 'Telegram01', id: 0, url: '/img/tele.png',},
    { name: 'Telegram02', id: 1, url: '/img/tele.png',},
])
const curLangObj = ref({
    name: 'English',
    value: 'en-US',
    checked: true,
    url: '/img/en.png'
})
//初始化语言
const initLanguage = () => {
    const lang = localStorage.getItem('lang') || 'en-US';
    langArr.value.forEach(v => {
        v.checked = v.value === lang
    })
    const matchedLang = langArr.value.find(v => v.checked);
    if (matchedLang) {
        curLangObj.value = matchedLang
    }
}
const openLang = ref(false)
const openSocial = ref(false)
const changeLanguage = (v) => {
    setLocale(v.value)
    Locale.use(v.value)
    localStorage.setItem('lang', v.value)
    openLang.value = false;

    // 设置当前语言为选中状态，并更新 UI 显示
    langArr.value.forEach(lang => {
        lang.checked = lang.value === v.value
    })

    curLangObj.value = v
}
onMounted(() => {
    initLanguage()
})
</script>
<style lang="css" scoped>
.lang:last-child{
    border:none
}
.van-divider{
    margin: 8px 0;
}
</style>